import React from 'react';
import { CheckCircle, XCircle, Info, AlertTriangle } from 'lucide-react';

export const Alert = ({ 
  children, 
  type = 'info', 
  className = '' 
}) => {
  const baseStyles = 'p-4 rounded-md flex items-start gap-3';
  
  const typeStyles = {
    success: 'bg-green-50 text-green-800 dark:bg-green-900/30 dark:text-green-400',
    error: 'bg-red-50 text-red-800 dark:bg-red-900/30 dark:text-red-400',
    info: 'bg-blue-50 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
    warning: 'bg-yellow-50 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
  };
  
  const icons = {
    success: <CheckCircle size={20} />,
    error: <XCircle size={20} />,
    info: <Info size={20} />,
    warning: <AlertTriangle size={20} />
  };
  
  const combinedClasses = `${baseStyles} ${typeStyles[type]} ${className}`;
  
  return (
    <div className={combinedClasses} role="alert">
      <div className="flex-shrink-0">{icons[type]}</div>
      <div>{children}</div>
    </div>
  );
};
